import BaseFrame from './BaseFrame';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import vertexShader from '@/shader/magic2/vert.glsl';
import fragmentShader from '@/shader/magic2/frag.glsl';
export default class Magic2 extends BaseFrame {
	constructor() {
		super();
		this.initScene();
	}
	initScene() {
		this.camera.position.set(0, 4, 8);
		const loader = new THREE.TextureLoader();
		const texture1 = loader.load('/img/texture/rotate1_1.png');
		const texture2 = loader.load('/img/texture/rotate1_2.png');
		const texture3 = loader.load('/img/texture/rotate1_3.png');
		this.groundMesh.visible = false;
		let geom = new THREE.PlaneGeometry(10, 10);
		this.shaderMaterial = new THREE.ShaderMaterial({
			uniforms: {
				//颜色
				uColor: {
					value: new THREE.Color(0x46c2f7),
				},
				//纹理1
				uTexture1: {
					value: texture1,
				},
				//纹理2
				uTexture2: {
					value: texture2,
				},
				//纹理3
				uTexture3: {
					value: texture3,
				},
				//时间变量
				uTime: {
					value: 0,
				},
				//速度变量
				uSpeed: {
					value: 10,
				},
			},
			vertexShader: vertexShader,
			fragmentShader: fragmentShader,
			transparent: true,
			blending: THREE.AdditiveBlending,
		});
		let mesh = new THREE.Mesh(geom, this.shaderMaterial);
		mesh.rotation.x = -Math.PI / 2;
		this.scene.add(mesh);

		let gltfLoader = new GLTFLoader();
		gltfLoader.load('/model/girl.gltf', (gltf) => {
			let model = gltf.scene;
			model.scale.multiplyScalar(2);
			model.position.y = 0.4;
			this.scene.add(model);
			this.initGui();
			this.renderOnce();
		});
	}
	initGui() {
		this.gui.add(this.shaderMaterial.uniforms.uSpeed, 'value').min(1).max(20).step(0.01).name('速度');
		this.gui.addColor(this.shaderMaterial.uniforms.uColor, 'value').name('颜色');
	}
	update() {
		if (this.shaderMaterial) {
			this.shaderMaterial.uniforms.uTime.value = this.clock.getElapsedTime();
		}
	}
}
